<template>
  <view>
    <!-- 1541 -->
    <u-modal
      :show="show"
      ref="uModal"
      :title="config.title"
      :show-title="config.showtitle"
      :confirm-text="config.confirmText"
      :cancel-text="config.cancelText"
      :show-cancel-button="config.showcancel"
      @confirm="confirm"
      @cancel="cancel"
    >
      <slot>
        <view class="modalinput" v-if="config.type == 'input'">
          <u-input
            :focus="true"
            :placeholder="config.placeholder"
            v-model="config.modalvalue"
          />
          <!-- type="number" -->
        </view>
        <view class="u-model__content__message" v-else>
          {{ config.content || "内容" }}
        </view>
      </slot>
    </u-modal>
  </view>
</template>

<script>
export default {
  name: "zmodal",
  data() {
    return {
      show: false,
      defaultconfig: {
        showtitle: true,
        showcancel: true,
        placeholder: "请输入内容",
        modalvalue: "",
        type: "",
        showtitle: "提示",
        confirmText: "确认",
        cancelText: "取消",
      },
      config: {},
    };
  },
  methods: {
    init(config) {
      this.config = {
        ...this.defaultconfig,
        ...config,
      };
      this.show = true;
    },

    close() {
      this.show = false;
    },
    async confirm() {
      this.show = false;
      if (this.config.confirm) {
        this.config.confirm(this.config);
      }
    },
    async cancel() {
      this.show = false;
      console.log("cancel");
      if (this.config.cancel) {
        this.config.cancel();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.modalinput {
  padding: 20rpx;
}

.u-model__content__message {
  // padding: 17px;
  font-size: 14px;
  text-align: center;
  color: #606266;
}
</style>
